<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa-color.js - method</title>
<style type="text/css">@import url(../README.css);</style>
<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
<script type="text/javascript" src="../uupaa-color.js"></script>
<style type="text/css">
html, body {
  margin: 0; padding: 0;
  text-shadow: 3px 3px 5px red;
  font-size: small;
}

</style>
</head>
<body>
<input type="button" value="forEach" onclick="forEach()" />
<!--
<input type="button" value="hexEach" onclick="hexEach()" />
<input type="button" value="rgbEach" onclick="rgbEach()" />
 -->
<input type="button" value="lock_unlock" onclick="lock_unlock()" />
<!-- for debug
<input type="button" value="lock_unlock_clear" onclick="lock_unlock_clear()" />
<input type="button" value="ref" onclick="ref()" />
<input type="button" value="input RGBAHash" onclick="RGBAHash()" />
<input type="button" value="input HSVAHash" onclick="HSVAHash()" />
<input type="button" value="complementary" onclick="complementary()" />
<input type="button" value="transparent" onclick="transparent()" />
 -->
<div>
  <div id="id0" style="position: absolute; top: 60px;  left: 0px;   width: 150px; height: 50px; background-color: pink"><span id="span0">id0</span></div>
  <div id="id1" style="position: absolute; top: 80px;  left: 40px;  width: 150px; height: 50px; background-color: pink"><span id="span1">id1</span></div>
  <div id="id2" style="position: absolute; top: 100px; left: 80px;  width: 150px; height: 50px; background-color: pink"><span id="span2">id2</span></div>
  <div id="id3" style="position: absolute; top: 120px; left: 120px; width: 150px; height: 50px; background-color: pink"><span id="span3">id3</span></div>
  <div id="id4" style="position: absolute; top: 140px; left: 160px; width: 150px; height: 50px; background-color: pink"><span id="span4">id4</span></div>
  <div id="id5" style="position: absolute; top: 160px; left: 200px; width: 150px; height: 50px; background-color: pink"><span id="span5">id5</span></div>
</div>
<script type="text/javascript">
if (/Gecko\//.test(navigator.userAgent)) {
  HTMLElement.prototype.__defineSetter__("innerText", function(text) {
    while(this.hasChildNodes()){
      this.removeChild(this.lastChild);
    }
    this.appendChild(document.createTextNode(text));
  });
}

window.onload = function() {
  uu.color("chocolate").
    lock().tone(0, 0, -20).tone(0, 0, -10).copy().tone(0, 0, 10).tone(0, 0, 20).unlock().
    hexEach(function(v, i) {
      document.getElementById("id" + i).style.backgroundColor = v;
  });
}
function forEach() {
  uu.color("red").push("blue").push("green").push("yellow").push("pink").push("black").forEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = uu.color(v).toString();
    document.getElementById("span" + i).innerText = uu.color(v).toString();
  });
}
/*
function hexEach() {
  uu.color("hoge").push("huga").push("piyo").hexEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = v;
    document.getElementById("span" + i).innerText = v;
  });
}
 */
function rgbEach() {
  uu.color("rgb(1,2,3)").push("rgba(1,2,3,0.1)").push("#C0FFEE").rgbEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = v;
    document.getElementById("span" + i).innerText = v;
  });
}
function lock_unlock() {
  var baseColor = "hotpink";
  var c = uu.color(baseColor).tone(0, 0, -20).tone(0, 0, -10).push("blue").lock().tone(10, 10, 20).
                             unlock().tone(10, 0, -20).
                             hexEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = v;
    document.getElementById("span" + i).innerText = v;
  });
}
function lock_unlock_clear() {
  var baseColor = "hotpink";
  var c = uu.color(baseColor).tone(0, 0, -20).tone(0, 0, -10).push("blue").lock().tone(10, 10, 20).
                             unlock().tone(10, 0, -20).clear().
                             hexEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = v;
    document.getElementById("span" + i).innerText = v;
  });
}
function ref() {
  var c = uu.color("pink").push("blue").push("yellow");

  try { alert(c.ref(-1)); } catch(e) { alert('error(c.ref(-1))'); }
  try { alert(c.ref(0));  } catch(e) { alert('error(c.ref(0))'); }
  try { alert(c.ref(1));  } catch(e) { alert('error(c.ref(1))'); }
  try { alert(c.ref(2));  } catch(e) { alert('error(c.ref(2))'); }
  try { alert(c.ref(3));  } catch(e) { alert('error(c.ref(3))'); }
}
function RGBAHash() {
  var c = uu.color({ r: 12, g: 34, b: 56, a: 0.5 });
  var i = 0;

  document.getElementById("id" + i).style.backgroundColor = c + "";
  document.getElementById("span" + i).innerText = c + "";
}
function HSVAHash() {
  var c = uu.color({ h: 240, s: 60, v: 40, a: 0.5 });
  var i = 0;

  document.getElementById("id" + i).style.backgroundColor = c + "";
  document.getElementById("span" + i).innerText = c.hsva() + "";
}
function complementary() {
  uu.color("pink").complementary().
       push("blue").complementary().
//     push("yellow").complementary().
//     zero().complementary().
       white().complementary().
       forEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = uu.color(v).toString();
    document.getElementById("span" + i).innerText = uu.color(v).toString();
  });
}
function transparent() {
  uu.color("transparent").forEach(function(v, i) {
    document.getElementById("id" + i).style.backgroundColor = uu.color(v).toString();
    document.getElementById("span" + i).innerText = uu.color(v).toString();
  });
}

</script>

</body>
</html>

